<!--督导组长查看-->
<template>
  <div class="wrapper-container">
    <div class="header" v-for="(item, index) in this.up" :key="index">
      <span
        >您当前评价为<span style="color:#FB563C">{{ item.dengji }}</span
        >的，按规定<span style="color:#FB563C">{{ item.bili }}</span
        >，还可以再评<span style="color:#FB563C">{{ item.manyPeople }}</span>
        名。</span
      >
    </div>
    <div class="table-container">
      <el-table
        tooltip-effect="light"
        :data="tableData"
        border
        style="width: 100%"
        class="table-data"
        row-class-name="row-class"
        cell-class-name="cell-class"
        header-row-class-name="header-row-class"
        header-cell-class-name="header-cell-class"
      >
        <el-table-column
          prop="pjEvalactor.coursename"
          label="课程名称"
          width="280"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="teachername"
          label="授课教员"
          width="280"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="dengji"
          label="评价等级"
          width="280"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="score"
          label="评价分数"
          width="280"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="result"
          label="评价状态"
          width="280"
          align="center"
          class-name=""
          label-class-name=""
        >
          <template slot-scope="scope">
            <div class="wrapper-button">
              <span
                class="wrapper-span"
                :class="scope.row.class"
                v-if="scope.row.result == '1'"
              >
                已评价
              </span>
              <span class="wrapper-span" :class="scope.row.class" v-else>
                未评价
              </span>
              <div
                class="search-button"
                @click="
                  RouterTo(
                    '/student/evaluation/addSupervisionInformation',
                    scope.row.resultid
                  )
                "
              >
                <img src="../../../assets/aaa.png" alt="" />
                <span v-show="scope.row.result === '1'">修改</span>
                <span v-show="scope.row.result === '0'">评价</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { supstudentlist, selectPjMany } from "@/api/student/student";

export default {
  data() {
    return {
      studentid: "200107",
      currentCell: "",
      resultid: "",
      up: [
        {
          bili: "",
          manyPeople: "",
          dengji: ""
        }
      ],

      tableData: []
    };
  },
  mounted() {
    this.supstudent();
    this.selectPjMany();
  },
  methods: {
    //网上评教
    supstudent() {
      return new Promise(() => {
        //教员查询到所有数据
        supstudentlist(this.studentid).then(res => {
          console.log("=====================请求=================");
          this.tableData = res.data.data;
          console.log(res, "res");
        });
      });
    },

    //评价条件
    selectPjMany() {
      return new Promise(() => {
        //教员查询到所有数据
        selectPjMany(this.studentid).then(res => {
          console.log("===================");
          this.up = res.data.data;
          console.log(res.data.data);
        });
      });
    },

    //跳转到修改页面
    RouterTo(path, resultid) {
      this.$router.push({
        path: path,
        query: {
          resultid: resultid,
          manyPeople: this.up
        }
      });
    },

    dealCommonn(item) {
      return item.substring(0, 36) + "...";
    },
    toLink(url) {
      this.$router.push(url);
    },
    cellMouseEnter(index) {
      this.currentCell = index;
    },
    cellLeave() {
      this.currentCell = "";
    }
  }
};
</script>
<style lang="less" scoped>
.wrapper-container {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
}
.table-container {
  margin-top: 30px;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }
  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
  .wrapper-button {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row;
    .wrapper-span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 25px;
      color: #51aef6;
      opacity: 1;
    }
    > div {
      margin-bottom: 8px;
    }
  }
  .search-button {
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 27px;
    background: #f1fff8;
    border: 1px solid #02c86c;
    border-radius: 6px;

    > span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #02c86c;
    }
    > img {
      width: 19px;
      height: 19px;
      margin-right: 4px;
    }
  }
}
.el-table--border {
  border: 0.8px solid #004ca7 !important;
  color: #004ca7 !important;
}
.header {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  span {
    margin-top: 14px;
    color: #004ca7;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
}
.red {
  color: #fb563c !important;
}
</style>
